<template>
  <div class="app-container">
  <div class="chat-container">
    <!-- 聊天消息显示区域 -->
    <div class="chat-messages">
      <div v-for="(message, index) in messages" :key="index" :class="['message', message.type]">
        {{ message.content }}
      </div>
    </div>
    <!-- 消息输入区域 -->
    <div class="chat-input">
      <el-input
          v-model="inputMessage"
          placeholder="请输入消息"
          @keyup.enter="sendMessage"
      ></el-input>
      <el-button type="primary" @click="sendMessage">发送</el-button>
    </div>
  </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 存储聊天消息的数组
const messages = ref([
  { type: 'system', content: '欢迎使用简易聊天系统' },
]);
// 存储用户输入的消息
const inputMessage = ref('');

/**
 * 发送消息的函数
 */
function sendMessage() {
  if (inputMessage.value.trim()) {
    // 添加用户发送的消息
    messages.value.push({ type: 'user', content: inputMessage.value });
    // 模拟收到回复
    setTimeout(() => {
      messages.value.push({ type: 'bot', content: '已收到你的消息：' + inputMessage.value });
    }, 500);
    // 清空输入框
    inputMessage.value = '';
  }
}
</script>

<style scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 500px;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
}

.chat-messages {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
}

.message {
  margin-bottom: 10px;
  padding: 8px;
  border-radius: 4px;
}

.user {
  background-color: #e6f7ff;
  text-align: right;
}

.bot {
  background-color: #f0f0f0;
}

.system {
  background-color: #fff6e6;
  text-align: center;
}

.chat-input {
  display: flex;
  padding: 10px;
  border-top: 1px solid #ccc;
}

.chat-input el-input {
  flex: 1;
  margin-right: 10px;
}
</style>